<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[#include "/WEB-INF/pages/common/taglibs.ftl"]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>文章缩略图</title>
	<meta name="menu" content="AdminMenu"/>
	<meta name="heading" content="heading"/>
	<meta name="form" content="current"/>
	<script type="text/javascript" src="[@c.url value='/themes/gettheme.js'/]"></script>
	<script type="text/javascript" src="[@c.url value='/js/plugins/jquery-1.7.min.js'/]"></script>
	<script type="text/javascript" src="[@c.url value='/js/plugins/jquery.alerts.js'/]"></script>
			
	<script type="text/javascript" src="[@c.url value='/js/plugins/jquery.metadata.js'/]"></script>
	<!-- 独立出共用js -->
	<script type="text/javascript" src="[@c.url value='/js/common.js'/]"></script>
	<link rel="stylesheet" type="text/css" href="[@c.url value='/js/plugins/jquery-jcrop/jquery.Jcrop.min.css'/]"/>
	<link rel="stylesheet" type="text/css" href="[@c.url value='/style/js/plugins/colorbox.css'/]"/>
	<link rel="stylesheet" type="text/css" href="[@c.url value='/style/style.css'/]"/>
	<!-- The localization script
	<script src="[@c.url value='/js/plugins/jquery-fileupload/js/locale.js'/]"></script> -->
	
	<!--图片剪切-->
	<script src="[@c.url value='/js/plugins/jquery-jcrop/jquery.Jcrop.min.js'/]"></script>
	
	<style type="text/css">
		#kcfinder_div {
		    display: none;
		    position: absolute;
		    width: 670px;
		    height: 400px;
		    background: #e0dfde;
		    border: 2px solid #3687e2;
		    border-radius: 6px;
		    -moz-border-radius: 6px;
		    -webkit-border-radius: 6px;
		    padding: 1px;
		    z-index: 1999;
		}
	</style>
	
	<script type="text/javascript">
		var base = (function(){
			// 事件绑定
			function _addEventListeners() {
				var callback = this.opener.callback;
				// 初始化callback方法
				if (window.opener && window.opener.Thumb) {
		            this.opener.callback = window.opener.Thumb.callBack;
		            callback = this.opener.callback;
		        }
		        // 确定按钮
		        $('#cutSubmit').click(function() {
					var thumbImg = ""; 
					if (window.opener && window.opener.Thumb) {
						// 确认按钮的回调...
						callback($("input[actkey='thumb']").val());
						window.close();
					}
					return false;
				})
				
				//初始化缩略图x:y
				$('#preview').parent('div').width(base.config.jcrop.thumb.width);
				$('#preview').parent('div').height(base.config.jcrop.thumb.height);
				$('#setRound').click(function(){
					var width = $('#thumb-vx').val();
					var height = $('#thumb-vy').val();
					// 重新设置缩略图大小
					base.config.jcrop.thumb.width = width;
					base.config.jcrop.thumb.height = height;
					$('#preview').parent('div').width(base.config.jcrop.thumb.width);
					$('#preview').parent('div').height(base.config.jcrop.thumb.height);
				})
			}
			
			function _addImageEventListeners() {
				//选择图片按钮
				$("button[actkey='thumb']").click(function() {
					var actval = $(this).attr('actval');
					// 取得kcfinder所在div
					$div = $('#' + actval);
		
			    	//由joiner.js的回调函数自动调用
				    window.KCFinder = {
				    	close: function() {
				    		// 关闭kcfinder
				        	$div.html('').css({display:'none'});
							window.KCFinder = null;
				    	},
				        callBack: function(url, uuid) {
				        	// --------------------------------------------------------
				        	//如果存在剪切图,清除之前的jcrop
							if ($view != null) {
								//清除剪切
							 	$view.destroy();
								$view = null;
								//重置size
								$(jcrop.view).css({width:0, height:0}).attr({'src':''});
								jcrop.url = '';
							}
							//清除预览图片
							if ($preview != null) {
								$preview.attr('src', '[@c.url value="${(article.titleImg)!''}"/]');
							}
							// --------------------------------------------------------
							
				            $("input[actkey='thumb']").val(url);
				            // 图片加载
				            var img = new Image();
							//设置图片地址
							jcrop.url = url;
							img.src = jcrop.base + jcrop.url;
							//img.src = url;
							img.onload = function() {
								var img = document.getElementById('thumb');
								//img.src = jcrop.base + jcrop.url;
								img.src = jcrop.base + jcrop.url;
								img.style.visibility = "visible"; 
								// 设置缩略图
								document.getElementById('preview').src=jcrop.base + jcrop.url;
								//document.getElementById('preview').src= jcrop.url;
								// 关闭kcfinder
					        	$div.html('').css({display:'none'});
								window.KCFinder = null;
						        if (jcrop.auto) {
						        	//生成剪切
						        	$view = jcrop.initJcrop();
						        	jcrop.resize();
						        }
							}
							img.onerror = function(e) {
				                alert(e);
				            };
				        }
				    };
				    
				    $div.html('<iframe name="kcfinder2_iframe" src="[@c.url value="/kcfinder/browse.kc?act=show&type=images&dir=public"/]" ' +
			        'frameborder="0" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" />');

			    	$div.show();
				});
				
				$('#cutImage').click(function(){
					if (jcrop.url == '') {
						jAlert('请选择图片');
						return false;
					}
					//取得坐标和size
					var x = jcrop.corrd.x;
					var y = jcrop.corrd.y;
					var w = jcrop.corrd.w;
					var h = jcrop.corrd.h;
					//缩略图size
					var rw= jcrop.thumb.width;
					var rh= jcrop.thumb.height;
					//没有设置地址
					if (jcrop.url == '') {
						return false;
					}
					var dir = jcrop.url
					var p = {'crop.dir': dir, 'crop.x':x, 'crop.y':y, 'crop.w':w, 'crop.h':h, 'crop.rw':rw, 'crop.rh':rh};
					var url = "[@c.url value='/common/Crop_img.action'/]";
					$.post(url, p, function(e){
						var crop = e.crop;
						if (crop.status == "success") {
							jAlert("${action.getText('thumb.crop.success')}");
							var url = "/" + crop.out;
							// 监控剪切图片....
							//$('#titleImg').attr('src', jcrop.base + url);
							$("input[actkey='thumb']").val(url);
						} else {
							alert("error");
						}
					}, "json");
					return false;
				});
				
				$('#clearImage').click(function() {
					jcrop.clear();
					return false;
				});
				
				//剪切图片的全局设置
				var jcrop = base.config.jcrop;
				
				//初始化剪切图片方法
				jcrop.initJcrop = function(){
					var $preview = $(jcrop.perview);
					var $view = $.Jcrop(jcrop.view);
					$view.setOptions({
						onChange: jcrop.showPerview,
						onSelect: jcrop.showPreview,
						onRelease: jcrop.hidePreview,
						aspectRatio: jcrop.thumb.width / jcrop.thumb.height
					}); 
					
					jcrop.resize();
					return $view;
				}
				//重置图片大小
				jcrop.resize = function() {
					//设置图片大小
					jcrop.size.width = $(jcrop.view).width();
					jcrop.size.height = $(jcrop.view).height();
				}
				//清除选择图片
				jcrop.clear = function() {
					if ($view != null) {
						//清除剪切
					 	$view.destroy();
						$view = null;
						//重置size
						$(jcrop.view).css({width:0, height:0}).attr({'src':''});
						jcrop.url = '';
					}
				}
				//展示选定图片区域
				jcrop.showPerview = function(coords) {
					if (parseInt(coords.w) > 0) {
						//计算缩小比例
						var rx = jcrop.thumb.width / coords.w;
						var ry = jcrop.thumb.height / coords.h;
						//设置坐标
						jcrop.corrd = {x:coords.x, y:coords.y, w:coords.w, h:coords.h};
						$(jcrop.preview).css({
							//根据比例重画图片
							width : Math.round(rx * jcrop.size.width) + 'px',
							height : Math.round(ry * jcrop.size.height) + 'px',
							marginLeft : '-' + Math.round(rx * coords.x) + 'px',
							marginTop : '-' + Math.round(ry * coords.y) + 'px'
						}).show();
					}
				}
				//隐藏缩略图
				jcrop.hidePreview = function() {
					$(jcrop.preview).stop().fadeOut('fast');
					// 使用原始缩略图
					//$(jcrop.preview).attr('src', '[@c.url value="${(article.titleImg)!''}"/]');
				}
				
				//剪切图片
				var $view = null,
					$preview = null;
					jcrop.init();
			}
			return {
                config: {
                	url : null,
                    theme: null,
                    jcrop:{
                    	base:'${request.contextPath}',
						proview: {},
						size:{width:640, height:480},	//默认图片大小
						thumb:{width:120, height:90},	//默认缩略图大小
						corrd:{x:0, y:0, w:0, h:0},		//默认坐标和size
						url:'',
						preview:'#preview',
						view:'#thumb',
						auto:true,
						init:function() {
							$('#thumb-vx').val(this.thumb.width);
							$('#thumb-vy').val(this.thumb.height);
						}
                    }
                },
                init: function () {
                	_addEventListeners();
                	_addImageEventListeners();
                }
			}
		}());
		
	$(function() {
		var thumb = {
		    opener: {
		    },
		    dir : ""
		};
		var link = "[@c.url value='/manage/Article_list.action?currentPage=${currentPage}' /]";
			base.config.theme = getTheme();
			base.config.url = link;
            //Initializing the form
			base.init();
	});
	</script>
</head>
<body id="body">
	<div style="margin:12px 1px 1px 12px;">
		<div class="thumb_center">
			<ul class="buttonlist">
				<li style="margin-bottom:4px;"><button actkey="thumb" actval="kcfinder_div" class="stdbtn btn_orange" style="opacity: 1;">选择图片</button></li>
				<li style="margin-bottom:4px;"><button id="cutImage" actkey="cut" actval="titleImageReview" class="stdbtn btn_orange" style="opacity: 1;">剪切图片</button></li>
				<li style="margin-bottom:4px;"><button id="clearImage" actkey="cut" actval="titleImageReview" class="stdbtn btn_orange" style="opacity: 1;">清除图片</button></li>
				<li style="margin-bottom:4px;"><button id="cutSubmit" class="stdbtn btn_orange" style="opacity: 1;">确定图片</button></li>
				<li><input type="text" style="width:24px;" id="thumb-vx" value="120" /> x <input type="text" style="width:24px;" id="thumb-vy" value="90" /><input type="button" id="setRound" value="设置"/></li>
            </ul>
            <div id="kcfinder_div"></div>
            <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
				<tr>
					<td style="vertical-align:top;">
						<p><label>这是是一些说明文字<small>这里是一些说明文字</small></label></p>
						<div style="overflow:hidden;margin-left:5px; border: 4px solid #ccc; border-radius: 6px 6px 6px 6px;">
							<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="preview" />
						</div>
						[#--<div>
							<img src="" id="titleImg" />--]
						</div>
					</td>
					<td>
						<div style="width:640px; height:480px; overflow:auto;">
							<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="thumb" />
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="thumb_right">
			<input type="hidden" actkey="thumb" />
		</div>
	</div>
</body>
</html>